<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			/* 标签重定义 */
			body {
				padding: 0;
				margin: 0;
				background: #ddd url(images/bg.jpg) repeat;
			}
			
			img {
				border: none;
			}
			
			a {
				text-decoration: none;
				color: #444;
			}
			
			a:hover {
				color: #999;
			}
			
			#title {
				width: 600px;
				margin: 20px auto;
				text-align: center;
			}
			/* 定义关键帧 */
			@-webkit-keyframes shade {
				from {opacity: 1;}
				15%{opacity: 0.4;}
				to {opacity: 1;}
			}
			@-moz-keyframes shade {
				from {opacity: 1;}
				15%{opacity: 0.4;}
				to {opacity: 1;}
			
			}
			@-ms-keyframes shade {
				from {opacity: 1;}
				15%{opacity: 0.4;}
				to {opacity: 1;}
			}
			@-o-keyframes shade {
				from {opacity: 1;}
				15%{opacity: 0.4;}
				to {opacity: 1;}
			}
			@
			keyframes shade {
				from {opacity: 1;}
				15%{opacity: 0.4;}
				to {opacity: 1;}
			}
			/* wrap */
			#wrap {
				width: auto;
				height: auto;
				margin: 0 auto;
				position: relative;
			}
			
			#wrap .box {
				width: 280px;
				height: auto;
				padding: 10px;
				border: none;
				float: left;
			}
			
			#wrap .box .info {
				width: 280px;
				height: auto;
				border-radius: 8px;
				box-shadow: 0 0 11px #666;
				background: #fff;
			}
			
			#wrap .box .info .pic {
				width: 260px;
				height: auto;
				margin: 0 auto;
				padding-top: 10px;
			}
			
			#wrap .box .info .pic:hover {
				-webkit-animation: shade 3s ease-in-out 1;
				-moz-animation: shade 3s ease-in-out 1;
				-ms-animation: shade 3s ease-in-out 1;
				-o-animation: shade 3s ease-in-out 1;
				animation: shade 3s ease-in-out 1;
			}
			
			#wrap .box .info .pic img {
				width: 260px;
				border-radius: 3px;
			}
			
			#wrap .box .info .title {
				width: 260px;
				height: 40px;
				margin: 0 auto;
				line-height: 40px;
				text-align: center;
				color: #666;
				font-size: 18px;
				font-weight: bold;
				overflow: hidden;
			}
			
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-btn {
				padding: 10px;
			}
			.go_top {
			    font-size: 14px;
			    text-align: center;
			    width: 40px;
			    height: 40px;
			    display: block;
			    position: fixed;
			    background-color: #C7B0B0;
			    border-radius: 50%;
			    right: 10px;
    			bottom: 20px;
			}
			.price {
				color: #e4393c;
				font-size: 20px;
				float: left;
				margin-left: 10px;
			}
			.good-name {
			    color: 
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title">ibuy</h1>
			<button id='setting' name="setting" class=" mui-pull-right mui-btn-link">设置</button>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div id="wrap">
                    <div class="box" style="display:none;">
                        <div class="info">
                            <div class="pic">
                                <img name="good1" src="images/1.jpg">
                            </div>
                            <div class="title">
                                <a href="http://www.sucaijiayuan.com">￥123</a>
                            </div>
                        </div>
                    </div>
				</div>
				<span id="go_top" class="go_top"><a onclick="javascript:void(0);" href="javascript:scroll(0,0)">回到顶部</a></span>
			</div>
		</div>
		<script src="js/3rdparty/jquery/dist/jquery.min.js"></script>
		<script>
			window.onload = function() {
				//运行瀑布流主函数
				PBL('wrap', 'box');
				firstFall();
				//设置滚动加载
				window.onscroll = function() {
					//校验数据请求
					if (getCheck()) {
						$.when(fallQueryGoods())
						.done(nextFall);
					}
				}
			}
			
			/**
			 * 瀑布流主函数
			 * @param  wrap	[Str] 外层元素的ID
			 * @param  box 	[Str] 每一个box的类名
			 */
			function PBL(wrap, box) {
				//	1.获得外层以及每一个box
				var wrap = document.getElementById(wrap);
				var boxs = getClass(wrap, box);
				//	2.获得屏幕可显示的列数
				var boxW = boxs[0].offsetWidth;
				var colsNum = Math.floor(document.documentElement.clientWidth / boxW);
				wrap.style.width = boxW * colsNum + 'px';//为外层赋值宽度
				//	3.循环出所有的box并按照瀑布流排列
				var everyH = [];//定义一个数组存储每一列的高度
				for (var i = 0; i < boxs.length; i++) {
					if (i < colsNum) {
						everyH[i] = boxs[i].offsetHeight;
					} else {
						var minH = Math.min.apply(null, everyH);//获得最小的列的高度
						var minIndex = getIndex(minH, everyH); //获得最小列的索引
						getStyle(boxs[i], minH, boxs[minIndex].offsetLeft, i);
						everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
					}
				}
			}
			/**
			 * 获取类元素
			 * @param  warp		[Obj] 外层
			 * @param  className	[Str] 类名
			 */
			function getClass(wrap, className) {
				var obj = wrap.getElementsByTagName('*');
				var arr = [];
				for (var i = 0; i < obj.length; i++) {
					if (obj[i].className == className) {
						arr.push(obj[i]);
					}
				}
				return arr;
			}
			/**
			 * 获取最小列的索引
			 * @param  minH	 [Num] 最小高度
			 * @param  everyH [Arr] 所有列高度的数组
			 */
			function getIndex(minH, everyH) {
				for (index in everyH) {
					if (everyH[index] == minH)
						return index;
				}
			}
			/**
			 * 数据请求检验
			 */
			function getCheck() {
				var documentH = document.documentElement.clientHeight;
				var scrollH = document.documentElement.scrollTop
						|| document.body.scrollTop;
				return documentH + scrollH >= getLastH() ? true : false;
			}
			/**
			 * 获得最后一个box所在列的高度
			 */
			function getLastH() {
				var wrap = document.getElementById('wrap');
				var boxs = getClass(wrap, 'box');
				return boxs[boxs.length - 1].offsetTop
						+ boxs[boxs.length - 1].offsetHeight;
			}
			/**
			 * 设置加载样式
			 * @param  box 	[obj] 设置的Box
			 * @param  top 	[Num] box的top值
			 * @param  left 	[Num] box的left值
			 * @param  index [Num] box的第几个
			 */
			var getStartNum = 0;//设置请求加载的条数的位置
			function getStyle(box, top, left, index) {
				if (getStartNum >= index)
					return;
				$(box).css({
					'position' : 'absolute',
					'top' : top,
					"left" : left,
					"opacity" : "0"
				});
				$(box).stop().animate({
					"opacity" : "1"
				}, 999);
				getStartNum = index;//更新请求数据的条数位置
			}
			function fallQueryGoods() {
				var dtd = $.Deferred(); // 新建一个deferred对象
				$.ajax({
					url : 'servlet/fallQueryGoods',
					method: "get",
					data: {_search: '', nd: 0, rows: 10, page: 1, sidx: 1, sord: 'asc'},
					success: function(msg) {
						var goodList = [];
						var goods = msg.rows;
						for ( var goodIndex in goods) {
							var good = goods[goodIndex];
							var goodUUID = good[0];
							var goodName = good[1];
							var goodImageUrl = good[2];
							var goodPrice = good[3];
							var goodDesc = good[4];
							goodList.push({
								goodUUID: goodUUID,
								name: goodPrice,
								title: goodName,
								src: goodImageUrl,
								price: goodPrice
							});
						}
						dtd.resolve(goodList); // 改变deferred对象的执行状态
					}
				});
				return dtd;
			}
			function nextFall(data) {
                var wrap = document.getElementById('wrap');
                for (i in data) {
                    //创建box
                    var box = document.createElement('div');
                    box.className = 'box';
                    wrap.appendChild(box);
                    //创建info
                    var info = document.createElement('div');
                    info.className = 'info';
                    box.appendChild(info);
                    //创建链接
                    var detail = document.createElement('a');
                    detail.href = 'servlet/toGoodDetail?goodUUID=' + data[i].goodUUID + '&_' + new Date().getTime();
                    info.appendChild(detail);
                    //创建pic
                    var pic = document.createElement('div');
                    pic.className = 'pic';
                    detail.appendChild(pic);
                    //创建img
                    var img = document.createElement('img');
                    img.src = data[i].src;
                    img.style.height = 'auto';
                    pic.appendChild(img);
                    //创建title
                    var title = document.createElement('div');
                    title.className = 'title';
                    info.appendChild(title);
                    //创建a标记
                    var a = document.createElement('a');
                    a.innerHTML = '<div><strong class="price"><em>¥</em>' + data[i].price + '</strong></div><div><em>' + data[i].title + '</em></div>';
                    title.appendChild(a);
                }
                PBL('wrap', 'box');
			}
			function firstFall() {
				var contentGoodsFall = document.getElementsByClassName('mui-content-padded');
                $.when(fallQueryGoods())
                .done(nextFall);
			}
		</script>
	</body>

</html>